<template>
  <el-popover trigger="click">
    <div class="click-count-box">
      <span class="system">当前系统热度 <span class="text">NO.{{ info.number }}</span>,共累计<span class="text">{{ info.clickd }}</span>次浏览量。</span>
      <div class="item" v-for="(item,index) of info.user_arr" :key="index">
        <span class="sort" :style="{color:colors[index]?colors[index]:colors[colors.length-1]}">NO.{{ index+1 }} </span>
        <span class="people">{{ item.name }}</span>
        <span class = "count">{{ item.c }}</span>
      </div>
    </div>
    <div slot="reference">
      <slot></slot>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "click-count",
  data(){
    return {
      colors:['#FF0000','#FF5E00','#FF8C00','#999999'],
      info: { user_arr:[] },
    }
  },
  watch:{
    clickCountInfos:{
      handler(){
        this.info = this.clickCountInfos
      },
      immediate:true
    }
  },
  computed:{
    clickCountInfos(){
      return this.$store.getters.clickCountInfos
    }
  },
};
</script>

<style scoped>

</style>
